<template>
	<view class="home">
		<custom-navbar title='产业资讯' :show-back="true" @back="handleBack" />

		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
			<image class="tilteImg" :src="cdn('产业资讯.jpg')"></image>
			<!-- <view class="tilteImg"></view> -->
			<view class="Industry">

				<view class="switchover fc f30bc3 p30 ">
					<view v-for='(item,index) in data16' class="typelist fcolcc" style="margin-right: 67rpx;">
						<view class="f30bc3" :class="policy_category == item.value ? 'c398DFB' :''"
							@click="Switchingsupply_demand(item.value)">
							{{item.label}}
						</view>
						<view :class="policy_category == item.value ? 'underline' :''"></view>
					</view>
				</view>
				<view class="Industrylist p0030">
					<view class="item mb20 p30" @click="handledetails(item)" v-for="(item,index) in Industrylist"
						:key="index">
						<view class="flex">
							<view class="itemLeft">
								<image class="itemLeftbg" :src="item.policy_image"></image>
								<!-- <view class="itemLeftbg"></view> -->
								<image class="top" v-if="item.is_top == 1" src="/static/images/Industry/置顶.svg"></image>
							</view>
							<view class="fcols ml30">
								<view class="ml10 f26bc3 mt5">{{item.policy_title}}</view>
								<view class="ml10 f225c9">{{item.create_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed,
		getCurrentInstance
	} from 'vue';
	import {
		PolicyLists
	} from '@/api/policy'
	import {
		getClassification
	} from '@/api/login'
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')
	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path
	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	const data16 = ref([])
	const loading = ref(false)
	// 单独请求 getClassification(16) 接口
	const fetchData = async () => {
		try {
			loading.value = true
			const res = await getClassification(0)
			data16.value = res.data
			policy_category.value = data16.value[0]?.value || '' // 添加可选链操作符防止undefined
			getPolicyLists()
		} catch (error) {
			console.error('请求分类数据失败:', error)
			uni.showToast({
				title: '加载分类失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}
	onMounted(fetchData)
	const page = ref(1)
	const limit = ref(10)
	const policy_module = ref(0)
	const policy_category = ref('')
	const Industrylist = ref([
		// 	{
		// 	img: '/static/images/Industry/img1.jpg',
		// 	text: '资讯标题内容资讯标题内容资讯标题内容',
		// 	date: '2024-08-20'
		// }, {
		// 	img: '/static/images/Industry/img2.jpg',
		// 	text: '资讯标题内容资讯标题内容资讯标题内容',
		// 	date: '2024-08-20'
		// }, {
		// 	img: '/static/images/Industry/img3.jpg',
		// 	text: '资讯标题内容资讯标题内容资讯标题内容',
		// 	date: '2024-08-20'
		// }, {
		// 	img: '/static/images/Industry/img4.jpg',
		// 	text: '资讯标题内容资讯标题内容资讯标题内容',
		// 	date: '2024-08-20'
		// }, {
		// 	img: '/static/images/Industry/img5.jpg',
		// 	text: '资讯标题内容资讯标题内容资讯标题内容',
		// 	date: '2024-08-20'
		// }, {
		// 	img: '/static/images/Industry/img6.jpg',
		// 	text: '资讯标题内容资讯标题内容资讯标题内容',
		// 	date: '2024-08-20'
		// },
	])

	const getPolicyLists = async () => {
		const parmas = {
			lang_code: 'zh',
			limit: limit.value,
			page: page.value,
			policy_module: policy_module.value,
			policy_category: policy_category.value
		}
		try {
			const Res = await PolicyLists(parmas)
			if (Res.code === 200) { // 注意这里是 ===，不是 =
				Industrylist.value = Res.data.data

			}
		} catch (error) {
			console.error('获取直播列表失败:', error)
			uni.showToast({
				title: '加载直播列表失败',
				icon: 'none'
			})
		}
	}
	const Switchingsupply_demand = (val) => {
		policy_category.value = val
		getSpaceLists()
	}
	const handleBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
	const handledetails = (val) => {
		uni.navigateTo({
			url: `/pages/Industry/details?policy_id=${val.policy_id}`
		});
	};
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		overflow: hidden; // 防止页面整体滚动

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			height: 100%;
			display: flex;
			flex-direction: column;
			// position: relative;

			.tilteImg {
				width: 100%;
				height: 422rpx;
				// background: pink;
			}

			.Industry {
				background: #DFEEFF;
				width: 100%;

				.typelist {
					position: relative;

					.underline {
						width: 40rpx;
						height: 4rpx;
						background: #398DFB;
						border-radius: 500rpx 500rpx 500rpx 500rpx;
						position: absolute;
						bottom: -23rpx;
						// left: 0;
					}
				}

				.Industrylist {
					.item {
						width: 100%;
						height: 212rpx;
						background: #ffffff;
						border-radius: 20rpx 20rpx 20rpx 20rpx;

						.itemLeft {
							position: relative;

							.itemLeftbg {
								width: 270rpx;
								height: 152rpx;
								// background: pink;
							}

							.top {
								width: 90rpx;
								height: 45rpx;
								position: absolute;
								left: 10rpx;
								top: 10rpx;
							}
						}


					}
				}
			}
		}
	}
</style>